// 导入：类型、接口、模块、组件、样式
import { Component } from "react";

// 留心1：除了App这个组件名用大驼峰 其他都用小驼峰
// 留心2：组件名导入统一大驼峰  防止和html标签冲突
import Header from "../../components/qfSwiper";
import QfNavBar from "../../components/qfNavBar";
import QfTabs from "../../components/qfTabs";
import QfTabBar from "../../components/qfTabBar";
import Film from "./components/film";

import "./styled.scss";

class Index extends Component {
  render() {
    return (
      <div className="home">
        {/* 轮播图 */}
        <div className="swiper">
          <Header />
        </div>
        {/* 轮播图 */}

        {/* 头部 */}
        <header>
          <QfNavBar />
          <QfTabs />
        </header>
        {/* 头部 */}

        {/* 电影列表 */}
        <Film />
        {/* 电影列表 */}

        {/* 底部导航 */}
        <QfTabBar />
        {/* 底部导航 */}
      </div>
    );
  }
}
export default Index;
